<!---->
<template>
	<view class="bg_white">
		<view style="padding:0 30rpx;">
			<view class="title row" style="justify-content: flex-start">
				<image :src="require('../static/gantanha.png')" style="width: 26rpx; height: 26rpx"></image>
				<text style="margin-left: 10rpx">以下各类型均可多选，可根据自身情况选择</text>
			</view>
		</view>
		<view class="select-box">
			<view class="select-item" v-for="(item, index) in Object.keys(form)" :key="index">
				<view class="select-left">
					<view class="select-name">{{ form[item].name }}：</view>
					<view class="tag-contaiuner">
						<view class="tag" v-for="(v, idx) in form[item].value" :key="idx">{{ v.dictLabel }}</view>
					</view>
				</view>
				<view @click="selectType(item)" class="select-right">
					<image :src="require('../static/jiaohuan.png')" style="width: 23rpx; height: 23rpx"></image>
				</view>
			</view>
		</view>

		<view class="footer-box">
			<view class="explain">
				需要更真实的数据，可以点击
				<text style="color: #007aff; font-weight: 600" @click="uploadPath">上传征信</text>
				,助融专家帮您深度解读征信，并提供融资方案
			</view>
			<view @click="save()" class="submit-btn">保存</view>
		</view>

		<uni-popup ref="popup" border-radius="20rpx" background-color="#fff" class="popcontainer">
			<view class="popup-content">
				<view class="popup-title">{{ popupObj.name }}({{ popupObj.type == 'one' ? '单选' : '可多选' }})</view>
				<scroll-view scroll-y style="height: 600rpx">
					<view class="tag-box">
						<view @click="selectItem(v, idx)" v-for="(v, idx) in popupObj.list" :key="idx"
							:class="v.checked ? 'tag-ac' : 'tag'">{{ v.dictLabel }}</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<view class="close" @click="reset()">取消</view>
					<view class="btn-st" @click="submit()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { searchDicListApi } from '@/api/public';
import { addSupplementApi, getSupplementApi, getMatchCreditStatus, getCmsMatchZxApi } from '@/api/product';

export default {
	data() {
		return {
			op: {},
			form: {
				farmersType: {
					type: 'many',
					name: '涉农类型',
					key: 'farmers_type',
					value: []
				}, //涉农
				personAptitude: {
					type: 'many',
					name: '资质类型',
					key: 'person_aptitude',
					value: []
				} // 资质
			},
			person_aptitudeList: [], // 资质列表
			farmers_typeList: [], // 涉农列表

			popupObj: {
				type: '',
				list: [],
				key: '',
				name: ''
			},
			selectItem(v, i) {
				if (this.popupObj.type == 'many') {
					v.checked = !v.checked;
				} else if (this.popupObj.type == 'one') {
					this.popupObj.list.forEach((val, idx) => (val.checked = i == idx));
				}
			}
		};
	},
	async onLoad(options) {
		this.op = options;
		await this.getData();
	},
	methods: {
		getFormData() {
			let par = Object.assign({}, this.op);
			par.id = decodeURIComponent(par.id)
			getSupplementApi(par).then((res) => {
				let params = res.data;
				delete params.id;
				delete params.type;
				const objMap = {
					personAptitude: 'person_aptitudeList',
					farmersType: 'farmers_typeList'
				};
				for (let key in params) {
					if (params[key] == null) {
						params[key] = '';
					}
					params[key] = params[key].split(',');
					this[objMap[key]] &&
						this[objMap[key]].forEach((v) => {
							params[key].forEach((v1) => {
								if (v.dictValue == v1) {
									v.checked = true;
								}
							});
						});
					let arr = this[objMap[key]].filter((v) => v.checked);
					this.form[key].value = arr;
					uni.hideLoading();
				}
			});
		},

		getRandomNumber(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		},
		save() {
			let time = this.getRandomNumber(4000, 6000);
			let obj = Object.assign({}, this.form);
			for (let key in obj) {
				obj[key] = obj[key].value
					.map((v) => {
						return v.dictValue;
					})
					.join(',');
			}

			let params = {
				...obj,
				...this.op
			};
			params.id = decodeURIComponent(params.id);

			addSupplementApi(params).then((res) => {
				this.$util.Tips({
					title: `保存成功,${res.message}`,
					endtime: time,
					icon: 'loading'
				});

				setTimeout(() => {
					uni.redirectTo({
						url: `/pagesProduct/matchResult/index?&id=${(this.op.id)}&type=${this.op.type}&current=${this.op.current}`
					});
				}, 3000);
			});
			console.log(params);
		},
		reset() { },
		submit() {
			let fArr = this.popupObj.list.filter((v) => v.checked);
			const list = fArr.map((v) => {
				return {
					dictLabel: v.dictLabel,
					dictValue: v.dictValue
				};
			});
			this.form[this.popupObj.key].value = list;
			this.popupObj = {
				type: '',
				list: [],
				key: '',
				name: ''
			};
			this.$refs.popup.close();
		},
		async uploadPath() {
			let params = Object.assign({}, this.op);
			var obj = {
				id: decodeURIComponent(params.id),
				type: params.type
			};
			getMatchCreditStatus(obj).then((res) => {
				if (res.data == 2) {
					this.$util.uploadFile({
						type: 3,
						name: 'multipart'
					}, (res) => {
						const data = JSON.parse(res.data);
						this.$util.Tips({ title: '上传成功' }, () => {
							let par = {
								creditUrl: data.data.url,
								id: decodeURIComponent(params.id),
								type: params.type
							}
							getCmsMatchZxApi(par).then(result => {
								let time = this.getRandomNumber(4000, 6000);
								this.$util.Tips({
									title: `保存成功,${result.message}`,
									endtime: time,
									icon: 'loading'
								}, () => {
									uni.redirectTo({
										url: `/pagesProduct/matchList/index`
									});
								});


							})
						})
					})
				} else {
					uni.navigateTo({ url: `/pageHome/prompt` });
				}
			});
		},
		selectType(v) {
			this.popupObj.type = this.form[v].type;
			this.popupObj.key = v;
			this.popupObj.list = this[this.form[v].key + 'List'];
			this.popupObj.name = this.form[v].name;
			if (this.form[v].value) {
				this.form[v].value.forEach((item) => {
					this.popupObj.list.forEach((val) => {
						if (item.dictValue == val.dictValue) {
							val.checked = true;
						}
					});
				});
			}
			this.$refs.popup.open('bottom');
		},
		getData() {
			uni.showLoading();
			let arr = ['person_aptitude', 'farmers_type'];
			searchDicListApi(arr.join(',')).then((res) => {
				arr.forEach((item) => {
					// this[item + "List"] = res.data[item];
					this.$set(this, item + 'List', res.data[item]);

					res.data[item].forEach((item) => {
						this.$set(item, 'checked', false);
					});
				});
				this.getFormData();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	text-align: center;
	font-size: 28rpx;
	color: #999;
	padding: 30rpx 0;
}

.select-box {
	// margin-top: 80rpx;
	padding: 0 30rpx;

	.select-item {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-left {
			height: 100rpx;
			display: flex;
			align-items: center;

			.select-name {
				font-weight: 500;
				// font-size: 32rpx;
			}

			.tag-contaiuner {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: scroll;
				margin-top: 20rpx;
				width: 520rpx;

				&::-webkit-scrollbar {
					display: none;
				}

				.tag {
					text-align: center;
					max-width: 360rpx;
					min-width: 200rpx;
					height: 80rpx;
					padding: 4rpx 10rpx;
					font-size: 30rpx;
					margin-bottom: 20rpx;
					background-color: #eef5ff;
					margin-right: 20rpx;
					color: #007aff;
					border: 2rpx solid #007aff;
					border-radius: 10rpx;
					line-height: 72rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
				}
			}
		}

		.select-right {
			color: #999;
		}
	}
}

/deep/ .popup-content {
	text-align: left;
	// padding: 15px;
	background-color: #fff;
	border-radius: 25rpx;
	overflow: hidden;
	width: 750rpx;
	margin: 0 auto;
	position: relative;
	z-index: 999;
	color: #000;
	font-size: 28rpx;

	.popup-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		padding: 20rpx 0 20rpx;
		border-bottom: 1rpx solid #e6e6e6;
		// margin-bottom: 20rpx;
	}

	.tag-box {
		padding: 30rpx;

		.tag {
			background-color: #f6f9f8;
			height: 90rpx;
			padding: 20rpx 40rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #666;
		}

		.tag-ac {
			height: 90rpx;
			padding: 20rpx 40rpx;
			font-size: 30rpx;
			color: #007aff;
			margin-bottom: 20rpx;
			background-color: #eef5ff;
			margin-right: 20rpx;
			font-weight: 500;
			position: relative; // 添加相对定位以便于绝对定位的伪元素
			display: flex;
			justify-content: center;
			align-items: center;

			&:after {
				content: '✓'; // 使用 Unicode 对号字符
				font-size: 20rpx; // 可根据需要调整大小
				color: #fff; // 对号颜色
				position: absolute;
				right: 10rpx; // 控制对号距离右边的距离
				top: 5rpx; // 控制对号距离顶部的距离
				z-index: 1; // 确保对号在最上层
			}

			&:before {
				content: '';
				position: absolute;
				right: 0; // 紧靠右边
				top: 0; // 紧靠顶部
				width: 40rpx; // 半圆的宽度（可根据需要调整）
				height: 40rpx; // 半圆的高度（可根据需要调整）
				background-color: #007aff; // 半圆背景颜色
				border-bottom-left-radius: 40rpx; // 创建朝左下方的四分之一圆角
				z-index: 0; // 在对号下层
			}
		}
	}

	.popup-footer {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;

		>view {
			padding: 30rpx 0;
			width: 48%;
			text-align: center;
			border-radius: 10rpx;
			font-weight: 500;
			font-size: 34rpx;
		}

		.close {
			color: #007aff;
			border: 1px solid #007aff;
		}

		.btn-st {
			background-color: #007aff;
			color: #fff;
		}
	}
}

.footer-box {
	position: fixed;
	width: calc(100% - 60rpx);
	bottom: 250rpx;
	left: 30rpx;
	right: 0;

	.explain {
		color: #999;
	}

	.submit-btn {
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 30rpx;
		text-align: center;
		background-color: #007aff;
		border-radius: 10rpx;
		color: #fff;
		font-weight: 500;
		font-size: 34rpx;
	}
}

/deep/ .uni-popup .uni-popup__wrapper {
	border-radius: 25rpx;
	overflow: hidden;
}
</style>
